<template>
  <div class="wrap">
    <div class="label" @click="showCountry()">
      <img v-if="nationCodeData.load!==0" class="label-img" :src="nationCodeData.country_img || '../../../static/img/nationalFlag/hskst.png'" />
      <span class="label-code"
        >+{{ nationCodeData.country_code || 7}}
        <Icon size="20" :type="show ? 'md-arrow-dropup' : 'md-arrow-dropdown'"
      /></span>
    </div>
    <transition>
      <ul class="country-wrap" v-show="show"  >
        <li
          v-for="(item, i) in countryList"
          class="country-item"
          :key="`country-${i}`"
          @click="select(item)"
        >
          <Avatar
            v-if="item.load !== 0"
            class="country-item-avatar"
            @on-error="(e) => onError(e, i)"
            size="small"
            :src="item.country_img"
          />
          <span class="country-item-name">{{
            `${item.country_cname} - ${item.country_ename} ${item.country_code}`
          }}</span>
        </li>
      </ul>
    </transition>
  </div>
</template>

<script>
import { mapState,mapMutations } from "vuex";
export default {
  name: "selectCountryList",
  data() {
    return {
      countryList: [],
      show: false,
    };
  },
  created() {
    this.getCountryList()
  },
  computed: {
    ...mapState(["nationCodeData"]),
  },
  methods: {
    ...mapMutations(['SET_NATION_CODE']),
    showCountry() {
      this.show = !this.show;
    },
    onError(e, i) {
      if (e.type === "error") {
        this.$nextTick(() => {
          this.$set(this.countryList[i], "load", 0);
        });
      }
    },
    getIpLocation() {
      this.$http.getIpLocation().then(res => {
        if (res.status === 200) {
          if (this.countryList.filter(v => v.id === res.data.id).length) {
            this.SET_NATION_CODE(this.countryList.filter(v => v.id === res.data.id)[0])
          }
        }
      });
    },
    getCountryList() {
      this.$http.getCountryList().then((res) => {
        const { status, data } = res;
        if (status === 200) {
          const _list = Object.values(data)
          this.countryList = _list.map((res) => res.list).flat()
          this.getIpLocation()
        }
      })
    },
    select(item) {
      this.SET_NATION_CODE(item)
      this.show = false;
    },
  },
};
</script>

<style lang="scss" scoped>
.wrap {
  position: relative;
}
.label {
  display: flex;
  align-items: center;
  justify-content: center;
  border-right: 1px solid #eee;
  width: 90px;
  flex: 1;
  cursor: pointer;
  &-code {
    color: #333;
    font-weight: 500;
    margin: 0 4px;
  }
  &-img {
    width: 20px;
  }
}
.country {
  &-wrap {
    position: absolute;
    padding: 10px;
    top: 40px;
    height: 320px;
    width: 370px;
    border: 1px solid #dcdcdc;
    overflow: auto;
    background-color: #fff;
    z-index: 9999;
  }
  &-item {
    display: flex;
    align-items: center;
    padding: 5px 0;
    cursor: pointer;
    &:hover {
      color: #e2231a;
    }
    &-avatar {
      width: 20px;
      height: 20px;
      margin-right: 6px;
    }
    &-name {
      margin: 0 4px;
    }
  }
}
</style>
